<template>
  <view class="appointment-list-page">
    <u-notice-bar
      class="appointment-notify"
      v-if="showNotify"
      text="收到预约请求,点击以复制链接前往审核"
      mode="closable"
      @click="handleCopyLink"
    ></u-notice-bar>
    <view
      class="appointment-list-container"
    >
      <AppointmentCard
        v-for="(item, index) in appointmentList"
        :key="index"
        :appointment="item"
      />
      <!-- 没有预约记录时显示空状态 -->
      <u-empty
        v-if="!appointmentList.length && status === 'nomore'"
        mode="data"
        text="暂无预约记录"
      ></u-empty>
      <!-- 加载更多指示器 -->
      <u-loadmore
        v-else
        :status="status"
        loadmoreText="点击此处文字，加载更多"
        @loadmore="loadmore"
        line
        icon-color="#028BF7"
      />
    </view>
  </view>
</template>

<script>
  import { appointment } from "@/api";
  import { showMessage } from "@/common/utils";
  import { ROUTE_PATHS } from "@/router/routes";
  import { ERROR_TYPE } from "@/common/constants";

  export default {
    data() {
      return {
        /**
         * 当前页数
         * @type {number}
         */
        pageNum: 1,

        /**
         * 每页大小
         * @type {number}
         */
        pageSize: 15,

        /**
         * 总数
         * @type {number}
         */
        total: 0,

        /**
         * 预约列表数据
         * @type {Array<Object>}
         */
        appointmentList: [],

        /**
         * 加载状态
         * @type {string}
         */
        status: "loadmore",

        /**
         * 预约id, 如果有则显示展示一个通知
         * @type {string}
         */
        appointmentId: "",

        /**
         * 通知是否显示
         * @type {boolean}
         */
        showNotify: false,

        /**
         * 当前页数
         * @type {number}
         */
        currentPage: 1,

        /**
         * 总页数
         * @type {number}
         */
        totalPages: 0,
      };
    },
    created() {
      /**
       * 组件创建时获取预约列表
       */
      this.fetchAppointmentList();
    },
    onLoad() {
      // 用来判断是否显示通知
      this.appointmentId = this.$store.state.appointment.appointmentId;
      if (this.appointmentId) {
        this.showNotify = true;
      }
      this.$store.dispatch("appointment/clearAppointmentId");
    },
    onReachBottom() {
      /**
       * 触底重新加载
       */
      this.loadmore();
    },
    async onPullDownRefresh() {
      await this.refresh();
      uni.stopPullDownRefresh();
    },
    methods: {
      /**
       * 复制链接
       */
      handleCopyLink() {
        // 获取源
        const source = window.location.origin;
        uni.setClipboardData({
          data: `${source}/#${ROUTE_PATHS.AUDIT}?id=${this.appointmentId}`,
        });
        showMessage("链接已复制", true);
      },

      /**
       * 获取预约列表
       * @returns {void}
       */
      async fetchAppointmentList() {
        this.status = "loading";
        try {
          const response = await appointment.getAppointmentList({
            pageNum: this.pageNum,
            pageSize: this.pageSize,
          });

          this.currentPage = response.data.current;
          this.totalPages = response.data.pages;
          this.total = response.data.total;

          if (this.pageNum > 1) {
            this.appointmentList = [
              ...this.appointmentList,
              ...response.data.records,
            ];
          } else {
            this.appointmentList = response.data.records;
          }

          this.status =
            this.currentPage >= this.totalPages ? "nomore" : "loadmore";
        } catch (error) {
          if (error.type === ERROR_TYPE.NETWORK) {
            return;
          }
          showMessage(error.msg || "获取数据失败", false);
        }
      },

      /**
       * 加载更多数据
       * @returns {void}
       */
      async loadmore() {
        if (this.status === "loadmore") {
          this.pageNum++;
          this.status = "loading";
          await this.fetchAppointmentList();
        }
      },

      /**
       * 刷新
       * @returns {void}
       */
      async refresh() {
        this.pageNum = 1;
        this.status = "loading";
        await this.fetchAppointmentList();
      },
    },
  };
</script>

<style lang="scss" scoped>
  page {
    background-color: #f2f2f2;
  }

  .appointment-list-page {
    padding: var(--margin-base);
  }

  .appointment-list-container {
    display: flex;
    flex-direction: column;
    gap: var(--margin-base);
  }
</style>
